<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑文章</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src='/javascripts/editJs/markdown-it.js'></script>
  <script src="/javascripts/editJs/toMark.js"></script>
  <script src="/javascripts/editJs/tui-code-snippet.js"></script>
  <script src="/javascripts/editJs/codemirror.js"></script>
  <script src="/javascripts/editJs/highlight.pack.js"></script>
  <script src="/javascripts/editJs/squire-raw.js"></script>
  <link rel="stylesheet" href="/stylesheets/editCss/codemirror.css">

</head>

<body>
  <div class="nav">
    <nav class="nanbar navbar-inverse navbar-fixed-top big" role="navigation">
      <div class="container">
          <div class="navbar-header">
              <a href="/index" class="navbar-brand">Forum</a>
              </div>
              <div class="collapse navbar-collapse">
              <!-- 下来菜单 -->
              <div class="dropdown navbar-right">
                  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
                      style="background-color: #111111;">
                      <img src="../images/html.jpg" class="img-circle" style="width: 30px;height: 30px;">
                  <!-- <span class="caret"></span> -->
                  </button>
                  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1" style="width: 50px;">
                      <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="/my/setting">个人设置</a>
                      </li>
                      <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="/login">退出登录</a>
                      </li>
                  </ul>

              </div>

          </div>
      </div>
  </nav>
  </div>
  <div class="htmleaf-container" style="margin-top: 5%;">
    <div class="container" style="margin-top:20px; margin-bottom:50px;">
    <form id="form-pub" enctype="multipart/form-data">
      <div class="articleTitle">
        <h3>标题</h3>
        <input id="articleTitle" name="title" class="form-control form-control-lg" type="text" placeholder="文章标题" style="width: 70%;">
      </div>
      <div class="articleMajor" style="margin: 15px 0px 15px 0px;">
        <h3>专业方向</h3>
        <select id="majorId" name="majorId" class="form-control form-select form-select-lg mb-3" style="width: 30%; height: 35px; font-size: medium;">
          <option value="">选择文章所属专业方向</option>
          <% for(let i=0; i<majorData.length; i++) { %>
          <option value="<%= majorData[i].majorId %>"><%= majorData[i].majorName%></option>
          <% } %>
        </select>
      </div>
      <div class="articleImage">
        <h3>文章封面</h3>
        <input type="file" id="file" style="display: none" accept="image/png,image/jpeg,image/gif"/>
        <img src="/images/add.png" id="image" style="width: 400px; height: 200px;">
      </div>
      <div class="code-html">
        <script src="/javascripts/editJs/tui-editor-Editor.js"></script>
        <link rel="stylesheet" href="/stylesheets/editCss/tui-editor.css">
        <link rel="stylesheet" href="/stylesheets/editCss/tui-editor-contents.css">
        <!-- 文本编辑器 -->
        <h3>正文内容</h3>
        <div id="editSection"></div>
      </div>
      <div class="container">
        <button type="submit" class="btn btn-info" id="fb" style="display: none">发布</button>
      </div>
    </form>
    </div>
  </div>
  <div  style="margin-bottom: 40px;">
    <button type="button" class="btn btn-primary btn-lg" style="margin-left: 48%;" data-toggle="modal" data-target="#myModal">
      发布
    </button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    <p>请确认发布文章</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="tofb" data-dismiss="modal">确认</button>
                </div>
            </div>
        </div>
    </div>
  </div>

  <script class="code-js">
  $(() => {

    // 新建文章json数据
    // var newArticle = {}

    $('#file').change(function () {
      f = document.getElementById('file').files[0];
      var reads = new FileReader();
      reads.readAsDataURL(f);
      reads.onload = function (e) {
        $('#image')[0].src = this.result;
        // newArticle.image = this.result;
      }
    })

    $('#image').eq(0).click(function () {
      $('#file').click()
    })


    // 富文本编辑器
    var content = [
      '## 二级标题',
      '- 无序列表',
      '1. 有序列表',
      '------',
      ' 分割线',
      '**加粗**',
    ].join('\n');

    var editor = new tui.Editor({
      el: document.querySelector('#editSection'),
      previewStyle: 'vertical',
      height: '600px',
      initialEditType: 'markdown',
      useCommandShortcut: true,
      initialValue: content,
      exts: ['scrollSync', 'colorSyntax', 'uml', 'chart', 'mark', 'table', 'taskCounter']
    });

    $("#tofb").on('click', () => {
      $("#fb").click()
    })

    // 检查
    function check() {
      title = $('#articleTitle').val()
      majorId = $('#majorId').val()
      content = editor.getHtml()
      image = $("#file").val()
      // console.log(image)

      if(title === "" ||  majorId === "" || content.length < 30) {
        alert("请输入必填项或者文章太短")
        return false
      }
      return true

    }
      // 文章发布
    $('#form-pub').on('submit', (e) => {
      e.preventDefault()

      if(!check()) return

      var fd = new FormData($('#form-pub')[0])
      var art_pic = $("#file")[0].files[0];
      fd.append("image", art_pic);
      var articleContent = editor.getHtml()
      fd.append("content", articleContent);
      publishArticle(fd);

    })

    function publishArticle(art_data) {
      $.ajax({
          type: "POST",
          url: "/articles/add",
          // data: newArticle,
          data: art_data,
          contentType: false,
          processData: false,
          success: function (response) {
            if(response.status !== 0) {
              console.log(response)
              alert("发布文章失败")
            } else {
              location.href = '/index'
            }
          },
        });
    }

  })
  </script>
  <script src="/javascripts/baseApi.js"></script>
  <script src="/javascripts/getuser.js"></script>
</body>

</html>